import styles from './styles.less';
import DataTable from './DataTable';
import {useState} from 'react';
import {Divider, Modal} from "antd";
import DataForm from './DataForm';
import SearchForm from "./SearchForm";


const App = (props) => {

  const {salersSetting, setSalersSetting} = props.data;
  const [tablePayload, setTablePayload] = useState({pageNum: 1, pageSize: 10, param: {}});
  const [dataForm, setDataForm] = useState(undefined);

  /* 取消操作 */
  function onCancel() {
    setSalersSetting(undefined);
  }

  return (
    <Modal
      title={salersSetting ? salersSetting.title : ''}
      open={salersSetting ? salersSetting.visible : false}
      forceRender={true}
      onCancel={onCancel}
      footer={null}
      width={1000}
      bodyStyle={{borderTop: '1px solid #f4f4f4'}}
    >
      <div className={styles.myContainer}>
        <DataForm data={{salersSetting, dataForm, setDataForm, tablePayload, setTablePayload}}/>
        <SearchForm data={{tablePayload, setTablePayload}}/>
        <Divider style={{marginTop: 0, marginBottom: 12}}/>
        <DataTable data={{salersSetting, setDataForm, tablePayload, setTablePayload}}/>
      </div>
    </Modal>
  );
};

export default App;
